<template>
	<view>

		
		 <u-swiper
				:list="banner"
				height='550'
				name='cover'
				@change="change"
				@click="click"
				
		 ></u-swiper>

		<view class="u-flex u-row-between" style="border-radius: 30rpx;
			box-shadow: 0px 10rpx 50rpx 0px rgba(213,63,38,0.17);padding:20rpx 30rpx ;position:relative;
			width: 700rpx;top: -30rpx;z-index: 999;background: #fff;left: 30rpx;">
			<view class="u-flex">
				<view class="u-flex">
					<u-icon name='map-fill' color='#e93218' size='40'></u-icon>
					<view class="u-font-22 u-margin-left-10 u-flex">
						<view @click="weather">{{cityArea || '获取城市'}}</view>
						<!-- <view class="u-font-weight u-margin-left-10">{{weathers}}</view>
						<view class="u-type-info u-margin-left-10">{{temperature}}℃</view> -->
					</view>
				</view>
				
				
				<!-- <view class="u-flex u-font-24 u-margin-left-30">
					<view>{{highTemp}}℃</view>
					<view style="transform: rotate(180deg);width:100rpx;margin: 0 20rpx;
						position: relative;top: -4rpx;">
						<u-line-progress active-color="#ff8450" :percent="TempPercent" :show-percent='false'>
						</u-line-progress>
					</view>
					<view>{{lowTemp}}℃</view>
				</view> -->
			</view>
			<view>
				<view class="clearfix custom-btn"
					style="border-radius: 40rpx;
					text-align: center;
				    font-size: 22rpx
				    padding:7rpx 20rpx;
					background: #ff8450;
					width: 160rpx;
					height: 50rpx;
					line-height: 50rpx;
					color: #fff;">
					车小吉福利号
					<button open-type="contact"></button>
				</view>
				<!-- <navigator url="../help/detail?id=2">
					<image src="../../static/vedio.png" style="width: 60rpx;height: 60rpx;"></image>
				</navigator> -->
			</view>
		</view>
		<view class="u-flex u-flex-between" style="width: 700rpx;margin: auto;">
			<navigator url="../list/index" hover-class="none">
				<view style="width: 210rpx;height: 316rpx;background-size: contain;background-repeat: no-repeat;"
					:style="{backgroundImage:'url('+imagesurl+'app/images/index_want.png)'}">
					<view class="" style="padding: 40rpx;color: #fff;font-size:32rpx">充值洗车</view>
				</view>
			</navigator>
			<navigator url="../list/index?isall=true" hover-class="none">
				<view
					style="margin:0 20rpx; width: 210rpx;height: 316rpx;background-size: contain;background-repeat: no-repeat;"
					:style="{backgroundImage:'url('+imagesurl+'app/images/index_wangneng.png)'}">
					<view class="" style="padding: 40rpx;color: #fff;font-size:32rpx">万能洗</view>
				</view>
			</navigator>
			<view class="">
				<navigator url="../apply/index" hover-class="none">
					<view
						style=" margin-top: 10rpx;width: 240rpx;height: 160rpx;background-size: contain;background-repeat: no-repeat;"
						:style="{backgroundImage:'url('+imagesurl+'app/images/index_add.png)'}">
						<view class="" style="padding: 20rpx;color: #fff;font-size:32rpx">咨询开店</view>
					</view>
				</navigator>
				<navigator url="../list/index?isall=true" hover-class="none">
					<view style=" width: 240rpx;height: 160rpx;background-size: contain;background-repeat: no-repeat;"
						:style="{backgroundImage:'url('+imagesurl+'app/images/index_card.png)'}">
						<view class="" style="padding: 20rpx;color: #fff;font-size:32rpx">办个年卡</view>
					</view>
				</navigator>
			</view>
		</view>
		<view style="width: 700rpx;margin: 20rpx auto;">
			<u-swiper
					:list="hezuo"
					height='350'
					name='cover'
					@change="change"
					@click="click"
			></u-swiper>
		</view>
		
		
		<!-- <view style="margin:20rpx auto; width: 700rpx;height: 300rpx;background-size: contain;background-repeat: no-repeat;"
		 :style="{backgroundImage:'url('+imagesurl+'app/images/index_banner_2.png)'}">
			
		</view> -->
		
		
        <view style="margin: 10rpx 10rpx;">
			<u-notice-bar mode="vertical" :list="nav" type='none'></u-notice-bar>
		</view>

        <view class="u-flex ">
			
				<view @click="go('../vip/index')"  style="margin:10rpx auto; width: 350rpx;height: 100rpx;background-size: contain;background-repeat: no-repeat;"
				 :style="{backgroundImage:'url('+imagesurl+'app/images/index_vip.png)'}">
					<div  style=' padding:40rpx 110rpx;color: #333333;'>会员福利</div>
				</view>
		
			
			
			<!-- 	<view @click="go('../shop/index')"  style="margin:10rpx auto; width: 350rpx;height: 100rpx;background-size: contain;background-repeat: no-repeat;"
				 :style="{backgroundImage:'url('+imagesurl+'app/images/index_shop.png)'}">
					<div style=' padding:40rpx 110rpx;color: #333333;'>积分商城</div>
				</view>
			 -->
			
		</view>



	</view>
</template>

<script>
	import wxLocation from '@/common/location.js';
	import scan from '@/common/scan.js';
	import url from '@/common/baseUrl.js';
	import amapFile from '@/common/amap-wx.js';

	const app = getApp()
	export default {
		data() {
			return {
				cityArea:'',
				highTemp: '',
				lowTemp: '',
				TempPercent: '',
				topBanner: [],
				animation: '', // 动画样式
				
				tabbar: [],
				imagesurl: url.imageUrl,
				url: url.url,
				city: "",
				area: '',
				
				weathers: "",
				temperature: "",
				carWashNum: "",
				applyNum: "",
				info: {

				},
				navlist: [],
				nav: [],
				
				hezuo: [],
				banner: [],
				isTitle: "",
				tempType: '',
				tempCity: ''

			}
		},
		onReady() {
			// this.tabbar = this.$store.state.tabbar
		},
		async onLoad() {
			// app.getlocation()
			 
			this.getConfig()
			this.getnotice()
			this.getbanner(1)
			this.getbanner(2)
			this.getbanner(3)
			this.statistics()

		},
		onShow() {


		},
		methods: {
			clkbanner(e, txt) {
				if (txt == 3) {
					let link = this.topBanner[e].link;
					if (!link) return
					uni.navigateTo({
						url: '/pages/web/index?url=' + link
					})
				} else {
					let link = this.banner[e].link;
					if (!link) return
					uni.navigateTo({
						url: '/pages/web/index?url=' + link
					})
				}

			},
			select(e) {
				if (e == 2) {
					scan.scan()
				}
			},
			go(url){
				uni.navigateTo({
					url:url
				})
			},
			goswcitab() {
				uni.switchTab({
					url: '/pages/active/index'
				})
			},
			goall() {
				uni.navigateTo({
					url: "../list/index?isall=true"
				})
			},
			sidebarClick() {
				this.animation = 'shake';
				setTimeout(() => {
					this.animation = ''
				}, 2000);
			},
			cToptag() {
				uni.setStorageSync('Toptag', true),
					this.Toptag = true
			},
			getConfig() {
				this.$u.api.getConfig().then(res => {

					uni.setNavigationBarTitle({
						title: res.siteName
					})
					this.isTitle = res.siteName;
				}).catch(err => {

				})
			},


			statistics() {
				return new Promise((resolve, reject) => {
					this.$u.api.statistics().then(res => {
						var {
							carWashNum,
							applyNum
						} = res;
						this.carWashNum = JSON.stringify(carWashNum);
						this.applyNum = JSON.stringify(applyNum);

						resolve(res)

					}).catch(err => {

					})
				})

			},


			getnotice() {
				this.$u.post('/api/index/notice', {

				}).then(res => {
					this.navlist = res;
					var arr = [];
					this.navlist.forEach(item => {
						arr.push(item.title)
					})
					this.nav = arr;
				}).catch(err => {

				})
			},
			getbanner(classify) {
				if (classify == 3) {
					var city = this.city
				} else {
					var city = ''
				}
				this.$u.post('/api/index/banner', {
					classify: classify,
					area: city
				}).then(res => {
					if (classify == 1) {
						this.banner = res

					}
					if (classify == 2) {
						this.hezuo = res
					}
					if (classify == 3) {
						this.topBanner = res
					}
				}).catch(err => {

				})

			},

			weather() {
				const wx = new wxLocation();
				wx.getAddress().then(res => {
					console.log(res)
					this.cityArea=res.city
				}).catch(err => {
				
				})
			}
		}
	}
</script>
<style lang="scss">
	.bg {
		background-size: cover;
		width: 100%;
		height: 550rpx;

	}

	.bg2 {
		background-size: cover;
		width: 710rpx;
		height: 150rpx;
		background-repeat: no-repeat;
		color: #fff;
		margin-bottom: 20rpx;
		border-radius: 20rpx;
	}

	.animation-shake {
		animation: shake 0.5s !important;
	}

	@keyframes shake {
		0% {
			transform: scale(0.8);

		}

		20% {
			transform: scale(0.9);
		}

		50% {
			transform: scale(1);
		}




	}

	.weather {
		background-size: cover;
		width: 100rpx;
		height: 100rpx;
		color: #3464D6;
		text-align: center;
		line-height: 45rpx;
		z-index: 999;
		margin-left: 20rpx;

	}

	.uservedio {
		position: absolute;
		right: 20rpx;
		top: 100rpx;
	}

	.mode1 {
		width: 347rpx;
		height: 194rpx;
		background-size: cover;

		.today {
			padding: 7rpx 14rpx;
			background: #5EAEE1;
			border-radius: 0px 25rpx 0px 25rpx;
			color: #fff;
			font-size: 28rpx;
			text-align: center;
			display: table;
			margin-left: 20rpx;
		}
	}

	.mode2 {
		width: 344rpx;
		height: 100rpx;
		background: #FAE6CE;
		border-radius: 15rpx 30rpx 15rpx 30rpx;
		background-size: cover;
	}
</style>
